<template>
	<div class="register">
		<h1>注册</h1>
		<van-form @submit="onSubmit">
			<van-field
				v-model="userName"
				name="userName"
				label="用户名"
				placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]"
			/>
			<van-field
				v-model="password"
				type="password"
				name="password"
				label="密码"
				placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]"
			/>
			<van-field
				v-model="nickName"
				name="nickName"
				label="昵称"
				placeholder="昵称"
				:rules="[{ required: true, message: '请填写昵称' }]"
			/>
			<img :src="imgUrl" alt="" v-if="imgUrl" width="100px" height="100" />
			<van-uploader :after-read="afterRead" v-else />
			<div style="margin: 16px">
				<van-button round block type="info" native-type="submit"
					>注册</van-button
				>
			</div>
		</van-form>
	</div>
</template>

<script>
import { reqRegister } from "@/api/user";
import { Toast } from "vant";
export default {
	data() {
		return {
			userName: "",
			password: "",
			nickName: "",
			imgUrl: "",
		};
	},
	computed: {},
	watch: {},

	methods: {
		// 点击注册的时候，values就是获取的参数的对象。
		async onSubmit(values) {
			console.log("submit", values);
			// 获取到api要的参数
			let data = {
				// userName: values.userName,
				// password: values.password,
				// nickName: values.nickName,
				...values,
				avatar: this.imgUrl,
			};
			// 调用封装的注册接口
			const res = await reqRegister(data);
			console.log(res);
			if (res.code == "success") {
				Toast("注册成功");
				// 跳转到登陆页面
				this.$router.push("/login");
			}
		},
		afterRead(file) {
			// 此时可以自行将文件上传至服务器
			console.log(file);
			this.imgUrl = file.content;
		},
	},
	created() {},
	mounted() {},
	components: {},
};
</script>
<style scoped>
h1 {
	font-size: 30px;
	line-height: 50px;
}
.register {
	text-align: center;
}
form .van-cell {
	margin: 10px;
}
img {
	margin: 0 auto;
}
</style>
